<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../css/index.css">
		<!-- 引入组件库 -->
		<script src="../../js/element/index.js"></script>
		<script src="../../js/axios.min.js"></script>
		<script src="../../js/qs.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 顶部搜索栏 -->
			<el-form :inline="true" :model="findUserInfo" class="demo-form-inline">
			  <el-form-item label="用户名">
			    <el-input v-model="findUserInfo.username" placeholder="请输入用户名"></el-input>
			  </el-form-item>
			  <el-form-item label="地址">
			    <el-input v-model="findUserInfo.useraddress" placeholder="请输入地址"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="getUserInfoes()">查询</el-button>
				<el-button type="success" @click="addUserInfoes()">新增</el-button>
				<el-button type="warning" @click="clearUserInfoes()">清空</el-button>
			  </el-form-item>
			</el-form>
			<!-- 条件搜索框结束 -->
			<!-- 列表显示开始 -->
			 <el-table
			    ref="multipleTable"
			    :data="userInfoes"
			    tooltip-effect="dark"
			    style="width: 100%"
			    @selection-change="handleSelectionChange">
			    <el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
				<el-table-column
				  type="index"
				  label="#"
				  width="50">
				</el-table-column>
			    <el-table-column
			      prop="username"
			      label="用户名"
			      width="120">
			    </el-table-column>
			    <el-table-column
			      prop="userpwd"
			      label="密码"
				  width="120">
				</el-table-column>
				<el-table-column
				    prop="usertel"
				    label="联系方式"
				    width="120">
			    </el-table-column>
				<el-table-column
				  prop="useraddress"
				  label="住址"
				  show-overflow-tooltip>
				</el-table-column>
				 <el-table-column label="操作">
					 <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。 -->
				      <template slot-scope="scope">
				        <el-button
				          size="mini"
				          @click="editUserInfo(scope.row)">编辑</el-button>
				        <el-button
				          size="mini"
				          type="danger"
				          @click="deleteUserInfo(scope.row.id)">删除</el-button>
				      </template>
				    </el-table-column>
			  </el-table>			 
			<!-- 列表显示结束 -->
			<!-- 新增、编辑需要的dialog框开始 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="75%">
			  <el-form :model="editUserInfoBean">
			    <el-form-item label="用户名" :label-width="formLabelWidth">
			      <el-input v-model="editUserInfoBean.username" autocomplete="off"></el-input>
			    </el-form-item>
			   <el-form-item label="密码" :label-width="formLabelWidth">
			     <el-input v-model="editUserInfoBean.userpwd" autocomplete="off"></el-input>
			   </el-form-item>
			   <el-form-item label="住址" :label-width="formLabelWidth">
			     <el-input v-model="editUserInfoBean.useraddress" autocomplete="off"></el-input>
			   </el-form-item>
			   <el-form-item label="联系方式" :label-width="formLabelWidth">
			     <el-input v-model="editUserInfoBean.usertel" autocomplete="off"></el-input>
			   </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="saveUserInfo()">确 定</el-button>
			  </div>
			</el-dialog>
			<!-- 新增、编辑的dialog框结束 -->
		</div>
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			// 搜索框绑定
			findUserInfo:{
				username:"",
				useraddress:""
			},
			// 表格数据对象绑定
			userInfoes:[],
			// dialog框是否显示
			dialogFormVisible:false,
			editUserInfoBean:{
				// 根据主键id是否有值，判断执行新增、编辑操作
				id:"",
				username:"",
				userpwd:"",
				useraddress:"",
				usertel:"",
				isdelete:0
			
			},
			formLabelWidth:"120px",
			deleteUserInfoBean:{
				id:"",
				isdelete:1
			}
			
		},
		methods:{
			getUserInfoes:function(){
				// 将参数进行序列表处理
				var params=Qs.stringify(this.findUserInfo)
				// 保存this对象
				var that=this
				// 发起请求
				axios.post("http://localhost:8086/getUserInfoes",params)
				.then(function (response) {
					console.log(response)
					// 将响应回来的数据赋值给表格数据对象
					that.userInfoes=response.data
					that.findUserInfo={
							username:"",
							useraddress:""
						}
				})
				.catch(function (error) {
					console.log(error);
				});
				
			},
			// 点击新增按钮触发的方法
			addUserInfoes:function(){
				// 表单清空
				this.editUserInfoBean={
				// 根据主键id是否有值，判断执行新增、编辑操作
				id:"",
				username:"",
				userpwd:"",
				useraddress:"",
				usertel:""
			
			}
			// 显示dialog框
				this.dialogFormVisible=true
			},
			clearUserInfoes:function(){
				// 清空条件筛选的表单
				this.findUserInfo={
				username:"",
				useraddress:""
			}
			// 执行查询操作
			this.getUserInfoes()
			},
			editUserInfo:function(userInfo){
				console.log(userInfo)
				// 获取改行的数据，赋值给编辑的对象
				this.editUserInfoBean=userInfo
				// 显示dialog框
				this.dialogFormVisible=true
			},
			deleteUserInfo:function(userid){
				this.deleteUserInfoBean.id=userid
				// 将参数进行序列表处理
				var params=Qs.stringify(this.deleteUserInfoBean)
				// 保存this对象
				var that=this
				// 删除提示
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							// 发起请求
							axios.post("http://localhost:8086/editUserInfo",params)
							.then(function (response) {
								console.log(response)
								if(response.data=="ok"){
									that.$message({
									  type: 'success',
									  message: '删除成功!'
									});
									that.getUserInfoes()
								}
							})
							.catch(function (error) {
								console.log(error);
							});
				          
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			},
		    handleSelectionChange(val) {
				this.multipleSelection = val;
		    },
			// 新增、编辑点击确定时进行触发
			saveUserInfo:function(){
				// 将参数进行序列表处理
				var params=Qs.stringify(this.editUserInfoBean)
				// 保存this对象
				var that=this
				// 发起请求
				axios.post("http://localhost:8086/editUserInfo",params)
				.then(function (response) {
					console.log(response)
					if(response.data=="ok"){
						that.dialogFormVisible=false
						that.getUserInfoes()
					}
				})
				.catch(function (error) {
					console.log(error);
				});
			}
			
			
		},
		mounted() {
			this.getUserInfoes()
		}
	})
	
	
	</script>
</html>
